<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版 | Log in</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <%--<script src="${pageContext.request.contextPath}/plugins/js/vuejs-2.5.16.js"></script>--%>
    <%--<script src="${pageContext.request.contextPath}/plugins/js/axios-0.18.0.js"></script>--%>
    <script src="${pageContext.request.contextPath}/js/vuejs-2.5.16.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios-0.18.0.js"></script>
</head>

<script>
    window.onload = function () {
        if (window.parent.window != window) {
            window.top.location = "/login.jsp";
        }
    }
</script>

<body class="hold-transition login-page">
<div class="login-box" id="app1">
    <div class="login-logo" >
        <a href="all-admin-index.html">{{title}}</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg">登录系统</p>
        <%--<form action="${pageContext.request.contextPath}/login" method="post">--%>
        <form >
            <div class="form-group has-feedback">
                <input type="email" name="email"  class="form-control" placeholder="Email" v-model="email">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" name="password" class="form-control" placeholder="密码" v-model="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label class="">${error}{{message}}</label>
                    </div>
                </div>
                <div class="col-xs-4">
                    <%--<button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>--%>
                        <input type="button" v-on:click="login" class="btn btn-primary btn-block btn-flat" value="登录"/>
                </div>
            </div>
        </form>
        <div class="social-auth-links text-center">
            <p>- 或者 -</p>
            <a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-qq"></i> 腾讯QQ用户登录</a>
            <a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-weixin"></i> 微信用户登录</a>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>

<script>
    $(function() {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });


    });

    var app=new Vue({
        el:"#app1",
        data:{
            title:"外贸出口云平台",
            email:"",
            password:"",
            message:""
        },

        methods:{
            login:function(){
                //用户数据的数据
                var email=this.email;
                var password=this.password;
                //发送异步请求
                var than=this;
                axios.post("/login",{email:email,password:password}).then(function(res){
                    //成功后的回调函数
                    if (res.data==true){
                        window.location.href="/toMain";
                    }else {
                        console.log(than.message);
                        than.message="您输入的账号或者密码有误";
                    }
                }).catch(function (reason) {  })
            }

            // login:function (){
            //     var email=this.email;
            //     var password=this.password;
            //
            //     var  url="/login";
            //     var than=this;
            //     axios.post(url,{email:email,password:password}).then(function (res) {
            //         var c=res.data;
            //
            //         if (c==true){
            //             window.location.href = "/toMain";
            //         }else{
            //             console.log(res);
            //             than.message="用户名或密码错误";
            //         }
            //     }).catch(function (reason) {  })
            // }

        }
    });

</script>
</body>
</html>
